<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="exhibition.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <!--登录面板-->
            <div class="panel panel-default">
                <!--面板标题-->
                <div class="panel-heading" id="heading">
                    <h2 class="panel-title">发布作品</h2>
                </div>
                <!--面板主体-->
                <div class="panel-body">
                    <!--登录表单-->
                    <form style="color: black" id="myform" class="form-horizontal" role="form"
                          action="loginaction" enctype="multipart/form-data">
                        <!--标题-->
                        <div class="form-group">
                            <label for="title" class="col-md-2 control-label">标题</label>
                            <div class="col-md-8">
                                <input type="text"
                                       class="form-control" id="title" name="title"
                                       placeholder="请输入作品标题">
                            </div>
                        </div>
                        <!--作者-->
                        <div class="form-group">
                            <label for="author" class="col-md-2 control-label">作者</label>
                            <div class="col-md-8">
                                <input type="text"
                                       class="form-control" id="author" name="author"
                                       placeholder="请输入作者名字">
                            </div>
                        </div>
                        <!--作品简介-->
                        <div class="form-group">
                            <label for="content" class="col-md-2 control-label">作品简介</label>
                            <div class="col-md-8">
                                <input type="text"
                                       class="form-control" id="content" name="content"
                                       placeholder="请输入作品简介">
                            </div>
                        </div>
                        <!--分类-->
                        <!--<div class="form-group">
                            <label  class="col-md-2 control-label">作品分类</label>
                            <div class="col-md-8">
                                <select name="categoryId">
                                    <option v-for="c in c_arr" :value="c.id">{{c.name}}</option>
                                </select>

                            </div>
                        </div>-->
                        <!--上传-->
                        <!--<div class="form-group">
                            <label  class="col-md-2 control-label">选择图片</label>
                            <div class="col-md-8">
                                <input type="file" name="picFile">
                            </div>
                        </div>-->

                        <!--发布按钮-->
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <button type="button" class="btn btn-default sublogin"
                                        @click="upload()">发布作品</button>
                                <span></span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
        let vm = new Vue({
            el:"#myform",
            data:[],
            methods:{
                upload:function () {
                    let data = new FormData(document.querySelector("form"));
                    axios.post("/exh/add",data).then(function () {
                        alert("添加成功!");
                    })
                }
            }
        })
</script>
</body>
</html>